<template>
	<view>
		<view class="list">
			<view class="list_personal" @click="revisePhotos">
				<view style="width: 438rpx;height: 128rpx;line-height: 128rpx;">
					<text>头像</text>
				</view>
				<view class="userPhoto">
					<view>
						<!-- 用户头像照片 -->
						<view class="revPhotos">
							<fileImage :src="file" :className="['head_img']" defaultImg="/static/userInfoIco.svg" />
						</view>
					</view>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>
			<view class="list_personal" @click="toggle">
				<view>
					<text>真实姓名</text>
				</view>
				<view class="agreeStyle">
					<text>{{userName}}</text>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>
			<view class="list_personal" @click="amendPhone">
				<view>
					<text>手机号</text>
				</view>
				<view class="agreeStyle">
					<text>+86 {{phone}}</text>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>
			<view class="list_personal" @click="firManage">
				<view class="companyNametext">
					<text>公司</text>
				</view>
				<view class="list_personal_right">
					<view class="beyondCompany">
						<text>{{companyName}}</text>
					</view>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>
			<view class="list_personal" @click="oneEmail">
				<view>
					<text>Email</text>
				</view>
				<view class="agreeStyle">
					<text>{{email}}</text>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>

			<view class="list_personal" @click="clickGender">
				<view>
					<text>性别</text>
				</view>

				<view class="agreeStyle">
					<text>{{sex== 1 ?"男":sex== 2?"女":""}}</text>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode="" />
				</view>
			</view>

			<view class="list_personal">
				<view>
					<text>生日</text>
				</view>
				<view class="agreeStyle">
					<uni-datetime-picker type="date" v-model="birthDay" @change="changeDay" :end="timeEnd">
						<text style="width: 100%;" v-if="birthDay!= '' && birthDay!=null">{{ birthDay }}</text>
						<text v-else style="color:#adadad;width: 100%;">填写生日有惊喜</text>
					</uni-datetime-picker>
					<view style="width: 30rpx;"></view>
					<image class="list_personal_icon" src="http://106.14.56.171:15016/images/u3089.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 底部弹窗名字-->
		<uni-popup ref="popup" type="bottom">
			<view class="toggleAmed">
				<h3>修改姓名</h3>
				<view class="placeholder">
					<input placeholder="请输入员工姓名(限制2-20个字符)" type="text" v-model="userNamea" minlength="2"
						maxlength="20"></input>
					<image src="http://106.14.56.171:15016/images/u8821.png" @click="deleContent" v-show="!flag">
					</image>
				</view>
				<view class="ameedBtn">
					<view @click="toggleA">取消</view>
					<view class="sure" @click="sureID">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部弹窗Email-->
		<uni-popup ref="popupB" type="bottom">
			<view class="toggleAmed">
				<h3>修改Email</h3>
				<view class="placeholder">
					<input placeholder="请输入Email邮箱" type="email" v-model="emailA" maxlength="30"></input>
					<image src="http://106.14.56.171:15016/images/u8821.png" @click="deleEmail" v-show="!emailFlag">
					</image>
				</view>
				<view class="ameedBtn">
					<view @click="closeEmail">取消</view>
					<view class="sure" @click="sureEmail">确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 底部弹窗性别-->
		<uni-popup ref="popupGender" type="bottom">
			<view class="sexOne">
				<radio-group name="sex" @change="radioChange">
					<label>
						<!-- 默认选中男 -->
						<view class="sexMan" style="border-bottom: 1px solid #DDDDDF;">
							<view style="color: #007AFF;">
								<radio color="#007AFF" value="1" :checked="sex === 1" />
								<text>男</text>
							</view>
						</view>
						<view class="sexWoman">
							<view style="color: #007AFF;">
								<radio color="#007AFF" value="2" :checked="sex === 2" /><text>女</text>
							</view>
						</view>
					</label>
				</radio-group>
				<view class="cancelSex" @click="closeSex">
					<text>取消</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				androidIos: '',
				head: '',
				newDay: '',
				companyName: '',
				// 点击显示隐藏true
				flag: true,
				emailFlag: true,
				phone: '', // 手机号
				userID: '', // 用户id
				userName: '', //修改后的姓名
				sex: '', //修改后的性别（默认男）
				birthDay: '', //修改后的生日
				birthDate: '',
				realName: '', //获取用户姓名
				name: '', //注册的接口名字
				headPortrait: '', // 头像
				file: '', //修改后的照片头像
				email: '', // 邮件
				companyId: '', // 当前企业id
				userOrgList: [], // 拥有企业集合
				emailA: '', // 修改要用的邮件
				userNamea: '', // 修改要用的用户名字
				timeEnd: '', //禁止当前日期之后的选择
			};
		},
		watch: {
			userNamea(nawValue, oldValue) {
				if (this.userNamea != "") {
					this.flag = false;
				} else {
					this.flag = true;
				}
			},
			emailA(emailA, emailB) {
				if (this.emailA != "") {
					this.emailFlag = false;
				} else {
					this.emailFlag = true;
				}
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		components: {
			fileImage
		},
		onLoad() {
			// 获取当前时间,禁止选中之后的日期
			this.timeEnd = this.formatDateTime(new Date());
			this.androidIos = getApp().globalData.androidIos
		},
		//第一次加载
		onShow(e) {
			// 渲染到页面上
			this.getUserInto()
		},
		methods: {
			...mapMutations(['setUserInfo']), // 非常重要
			getUserInto() {
				let appidData = {
					appId: this.androidIos
				}
				this.$httpNew.post('authApi/auth/GetUserInfo', appidData).then(res => {
					// console.log(res, '------------')
					this.head = res.head
					this.phone = res.phone || ''; //渲染手机号
					this.companyName = res.corpName || ''; //渲染公司名称
					this.email = res.email || ''; //渲染到页面上的邮箱
					this.file = res.head + '?time=' + new Date().getTime() || '';
					this.userID = res.userID || ''; // 从vuex拿去的ID
					this.userName = res.name || ''; // 修改后的名字接口
					this.sex = res.sex || ''; // 修改后的性别接口
					this.birthDay = res.birthDate && res.birthDate.includes("T") ? res.birthDate.split('T')[0] :
						res.birthDate;
					this.setUserInfo(res)
					this.userNamea = this.userName;


					this.emailA = res.email
					this.newDay = res.birthDate
				})
			},
			// 集合data
			gatherData() {
				let birthDate = this.newDay ? this.newDay.replace(/\s/g, "T") : null;
				let data = {
					userID: this.userID,
					name: this.userNamea,
					email: this.emailA,
					sex: this.sex || null,
					birthDate
				}
				// console.log('参数==', data);
				return data;
			},
			//单选框（获取性别
			radioChange(evt) {
				this.sex = Number(evt.detail.value)
				// 调用data集合
				let data = this.gatherData()
				this.$httpNew
					.post('authApi/user/updateUser', data)
					.then(res => {
						if (res == null) {
							this.getUserInto(res); // 非常重要
							// 选中的时候，关闭弹出框
							this.$refs.popupGender.close('bottom')
						}
					})
			},
			//输入要修改的名字不能为空 调接口
			sureID() {
				let nameFocus = /^[^\s]/;
				let data = this.gatherData()
				if (this.userNamea == '') {
					uni.showToast({
						title: '请输入要修改的名字',
						icon: 'none'
					});
				} else if (!nameFocus.test(this.userNamea)) {
					uni.showToast({
						title: '输入用户名前面有空格',
						icon: 'none'
					});
					this.userNamea = '';
				} else {
					this.$httpNew
						.post('authApi/user/updateUser', data)
						.then(res => {
							console.log(res);
							if (res == null) {
								this.name = this.userNamea
								this.getUserInto()
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
								this.$refs.popup.close('bottom')
							}
						})
				}
			},
			// 确定要输入要修改的Email不能为空
			sureEmail() {
				let emailMace = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
				if (this.emailA == '') {
					this.emailMethod() //邮件接口方法集合
				} else if (!emailMace.test(this.emailA)) {
					uni.showToast({
						title: '请输入正确邮箱',
						icon: 'none'
					});
					this.emailA = '';
				} else {
					this.emailMethod() //邮件接口方法集合
				}
			},
			// 点击确认生日日期调接口	
			changeDay(e) {
				this.newDay = e
				this.$nextTick(() => {
					// 调用data集合
					let data = this.gatherData()
					// 判断选择的当前日期,然后提示日期错误
					this.$httpNew
						.post('authApi/user/updateUser', data)
						.then(res => {
							if (res == null) {
								this.getUserInto(res); // 非常重要
								uni.showToast({
									title: '修改成功',
									icon: 'none'
								})
							}
						})
				})
			},
			revisePhotos() {
				console.log('555555555555');
				this.$httpNew.urlImgUpload('authApi/user/updateUserHead', {
					count: 1,
					file: this.file,
				}, {
					onEachUpdate: res => {
						console.log("单张上传成功返回：", res);
					},
					onProgressUpdate: res => {
						console.log("上传进度返回：", res);
					}
				}).then(res => {
					// 必须加一个时间戳  非常重要
					// console.log(this.file, res, 483);
					this.file = res + "?time=" + new Date().getTime()
					this.getUserInto()
					uni.showToast({
						title: '修改成功',
						icon: 'none'
					})
				});
			},
			// 电子邮箱接口方法集合
			emailMethod() {
				let data = this.gatherData() // 调用data集合
				this.$httpNew
					.post('authApi/user/updateUser', data)
					.then(res => {
						if (res == null) {
							this.email = this.emailA
							this.getUserInto(res); // 重要
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							// 点击确定，关闭弹出框
							this.$refs.popupB.close('bottom')
						}
					})
			},
			// 判断日期时间,是否超过当天
			formatDateTime(date) {
				var y = date.getFullYear();
				var m = date.getMonth() + 1;
				m = m < 10 ? ('0' + m) : m;
				var d = date.getDate();
				d = d < 10 ? ('0' + d) : d;
				var h = date.getHours();
				h = h < 10 ? ('0' + h) : h;
				return y + '-' + m + '-' + d
			},
			// 点击名字显示
			toggle() {
				this.$refs.popup.open('bottom')
			},
			// 点击Email显示
			oneEmail() {
				this.emailA = this.email;
				this.$refs.popupB.open('bottom')
			},
			// 点击显示选择男女
			clickGender() {
				this.$refs.popupGender.open('bottom')
			},
			// 点击取消性别选项,返回个人信息页面
			sexInfor() {
				this.$refs.popupGender.open('bottom')
			},
			// 点击取消隐藏弹出框
			toggleA() {
				this.$refs.popup.close('bottom')
			},
			// 点击Email显示隐藏
			closeEmail() {
				this.$refs.popupB.close('bottom')
			},
			// 点击取消性别隐藏
			closeSex() {
				this.$refs.popupGender.close('bottom')
			},
			// 点击删除小图标清空输入的内容
			deleContent() {
				this.userNamea = ''
			},
			deleEmail() {
				this.emailA = ''
			},
			// 点击进入公司切换企业页面
			firManage() {
				uni.navigateTo({
					url: './user_switchEnterprise'
				})
			},
			// 点击跳转手机页面
			amendPhone() {
				uni.navigateTo({
					url: './user_amendphone'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.list {
		background-color: #fff;
	}

	.list_personal {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 30rpx 10rpx 30rpx 40rpx;
		align-items: center;
		border-top: 1px solid #F5F5F5;

		>view:nth-child(2) {
			margin-right: 18rpx;
		}
	}

	.list_personal text {
		color: #333333;
		font-size: 32rpx;
	}

	// 用户头像照片
	.userPhoto {
		width: 27%;
		margin-left: 50rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// background-color: aquamarine;
	}

	// 真实姓名
	.agreeStyle {
		// width: 26%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;

		// background-color: aquamarine;
		>text {
			margin-right: 26rpx;
		}
	}

	/deep/.uni-datetime-picker--btn {
		background-color: #B5001E;
	}

	.companyNametext {
		width: 80rpx;
		// background-color: red;
	}

	.list_personal_right {
		width: 83%;
		margin-left: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		// background-color: aquamarine;

	}

	// 超出公司名称,超出的部分为省略号
	.beyondCompany {
		width: 90%;
		/*溢出隐藏,超出部分变成省略号*/
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		word-break: break-all;
		text-align: right;
		// background-color: darkturquoise;
	}

	.list_personal_icon {
		width: 25rpx;
		height: 25rpx;
	}

	.revPhotos {
		width: 140rpx;
		height: 140rpx;
	}


	// 底部弹窗
	.toggleAmed {
		width: 100%;
		height: 650rpx;
		background-color: #ffffff;
		margin: auto;
		border-radius: 30rpx 30rpx 0 0;
		box-shadow: 5px 5px 10px 5px #ccc;
	}

	.toggleAmed>h3 {
		position: relative;
		top: 46rpx;
		margin-left: 56rpx;

	}

	.placeholder {
		position: relative;
		top: 76rpx;
		width: 90%;
		height: 100rpx;
		margin: auto;
		border-bottom: 1px solid #f1f1f1;
		display: flex;
		align-items: center;
		// text-indent: 18rpx;
		// background-color: aqua;
	}

	.placeholder>input {
		margin-left: 15rpx;
		height: 100rpx;
		// background-color: aqua;
		border-bottom: 1px solid #f1f1f1;
		width: 82%;
	}


	.placeholder>image {
		width: 38rpx;
		height: 38rpx;
	}

	.ameedBtn {
		position: relative;
		top: 272rpx;
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.ameedBtn>view {
		width: 326rpx;
		height: 82rpx;
		line-height: 82rpx;
		border-radius: 182rpx;
		text-align: center;

	}

	.ameedBtn>view:nth-child(1) {
		background-color: #F5F5f5;

	}

	.sure {
		background-color: #9E001A;
		color: #ffffff;
	}

	// 性别
	.sexOne {
		height: 280rpx;
	}

	.sexMan {
		position: relative;
		top: -35rpx;
		width: 95%;
		height: 80rpx;
		background-color: #FFFFFF;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #EDEDEF;
		border-radius: 19rpx 19rpx 0 0;

	}

	.sexWoman {
		position: relative;
		top: -35rpx;
		width: 95%;
		height: 80rpx;
		background-color: #FFFFFF;
		margin: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		background-color: #EDEDEF;
		border-radius: 0 0 19rpx 19rpx;
	}

	.cancelSex {
		position: relative;
		top: -15rpx;
		width: 95%;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin: auto;
		border-radius: 19rpx;
		background-color: #ffffff;
		color: #007AFF;
	}

	.picker-view {
		width: 750rpx;
		height: 600rpx;
	}

	.item {
		height: 50px;
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.selectDate {
		background-color: #fff;
	}

	// 点击确认修改日期
	.sureDate {
		width: 100%;
		height: 98rpx;
		background-color: #fff;
	}

	.sureDate>view {
		width: 85%;
		height: 58rpx;
		line-height: 58rpx;
		background-color: #007AFF;
		color: #fff;
		text-align: center;
		margin: auto;
		border-radius: 30rpx;
	}
</style>
<style lang="scss">
	.list {
		.head_img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>
